<style lang="scss" scoped>
* {
    font-size: 14px;
}

.box {
    display: flex;
    flex-direction: column;
}

.main {
    height: 90vh;
    overflow-y: scroll;
}

.mianitem {
    background: linear-gradient(rgb(30, 111, 255), #fff);
    overflow: hidden;
    // overflow-y: scroll;

    .doctor {
        display: flex;
        flex-direction: column;
        width: 96%;
        background: #fff;
        height: 100%;
        margin: 10px;
        border-radius: 10px;
        padding: 10px;

        dd {
            margin-left: 5px;
            flex: 1;
        }

        dl {
            display: flex;
            align-items: start;
            font-size: 15px;
            width: 100%;

            .name {
                display: flex;
                justify-content: space-between;
                width: 100%;
                align-items: center;

                .namedoctor {
                    display: flex;

                    span {
                        margin-left: 10px;
                        padding: 2px;
                        align-items: center;
                        height: 15px;
                        background-color: rgb(1, 180, 136);
                        color: #fff;
                        border: none;
                        font-size: 10px;
                    }
                }

                button {
                    border: none;
                    padding: 5px 10px;
                    border-radius: 50px;
                    background-color: rgb(255, 239, 228);
                    color: rgb(250, 106, 11)
                }
            }
        }
    }
}

.classitem {
    display: flex;
    justify-content: space-between;

    .divitem:last-child {
        border-right: none;
    }

    .divitem {
        padding: 20px 0 20px 0;
        display: flex;
        flex-direction: column;
        width: 25%;
        text-align: center;

        span {
            font-size: 20px;
            padding: 5px;
            font-weight: 700;

        }

        p {
            font-size: 14px;
            color: #ccc;
        }
    }
}

.popup {
    display: flex;
    justify-content: right;
    color: rgb(30, 111, 255);
}

.showTan {

    dl {
        padding: 10px;

        dd {
            margin-left: 10px;

            span {
                display: block;
                padding: 10px 0 10px 0;
            }


        }
    }
}

.mainitems {
    background: linear-gradient(#f5f5f5, #f0f0f0);

    // overflow-y: scroll;
    padding: 10px;

    .doctorFu {
        margin: 10px 0 10px 0;
        padding: 10px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        border-radius: 10px;

        .divlist {
            display: flex;
            justify-content: space-between;
            text-align: center;
            align-items: start;

            img {
                width: 50px;
                height: 50px;
            }

            p {
                font-weight: 600;
                padding: 5px;
            }

            span {
                color: rgb(156, 157, 157);
                font-size: 14px;
            }
        }
    }
}

.divPinJia {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;

    .header {
        display: flex;
        justify-content: space-between;
        padding: 10px;

        span {
            color: rgb(30, 111, 255);
        }
    }

    .divitemJia {
        border-bottom: 1px solid #ccc;
    }

    .divitem {
        display: flex;
        justify-content: space-between;
    }

    ul {
        display: flex;
        flex-wrap: wrap;

        li {
            padding: 7px 10px;
            border-radius: 50px;
            border: 1px solid #ccc;
            margin-top: 10px;
            margin-left: 10px;
        }
    }

    p {
        padding: 10px;
    }

    span {
        padding: 10px;
        display: flex;
    }
}

.divJinqi {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 20px;

    .header {
        display: flex;
        justify-content: space-between;
        padding: 10px;

        span {
            color: rgb(30, 111, 255);
        }
    }

    .divitem {
        display: flex;
        flex-direction: column;

        p {
            padding: 10px;
        }

        span {
            padding: 10px;
            display: flex;
        }

        img {
            width: 80%;
            margin-left: 10%;
        }
    }
}

.gunDong {
    height: 80px;
    width: 94%;
    background: transparent;
    position: fixed;
    bottom: 50px;
    margin-left: 3%;

    .gunItem {
        margin-bottom: 10px;
        display: flex;
        height: 30px;
        align-items: center;
        background: rgb(121, 169, 255);
        border-radius: 50px;
        padding: 10px;
        color: #fff;

        img {
            width: 20px;
            height: 20px;
        }

        span {
            font-size: 12px;
        }
    }
}

.TanZi {
    display: flex;
    flex-direction: column;

    dl {
        display: flex;
        height: 100px;
        background-color: rgb(250, 251, 252);
        padding: 10px;
        border-radius: 20px;
        margin-top: 10px;

        dt {
            img {
                width: 50px;
                height: 50px;
            }
        }

        dd {
            display: flex;
            flex: 1;
            flex-direction: column;

            .jiaGe {
                display: flex;
                justify-content: space-between;

                span {
                    color: rgb(250, 100, 0);
                    font-weight: 600;
                }
            }

            .button-Img {
                display: flex;
                justify-content: space-between;
                align-items: center;

                button {
                    padding: 3px 10px;
                    border-radius: 10px;
                    border: none;
                    background-color: rgb(30, 111, 255);
                    color: #fff;
                }
            }

        }
    }

    dl:nth-child(2) {
        margin-bottom: 200px;
    }
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    opacity: 999;
    border: none;
    border-radius: 50px;
    background-color: rgb(30, 111, 255);
    color: #fff;
}
</style>
<template>
    <div class="box">
        <van-nav-bar title="妙手医生网络诊室" left-text="返回" left-arrow @click-left="router.go(-1)" />
        <div class="main">
            <div class="mianitem">
                <div class="doctor" v-if="doctorListitem">
                    <dl>
                        <dt><img :src="doctorListitem.doctorimage"
                                style="width: 80px;height: 80px;border-radius: 50px;border: 1px solid #ccc;" alt="">
                        </dt>
                        <dd>
                            <div class="name">
                                <div class="namedoctor">
                                    <h2>{{ doctorListitem?.doctorname }}</h2>
                                    <span>{{ doctorListitem?.socolv }}</span>
                                </div>
                                <button @click="headleGuan">{{ doctorListitem?.doctorflag === '1' ? '取消关注' : '+关注'
                                    }}</button>
                            </div>
                            <div class="typedoctor" style="font-size: 12px;">
                                <p>{{ doctorListitem?.doctorstate }}</p>
                                <p>{{ doctorListitem?.doctoradministre }}</p>
                            </div>
                            <div class="hospital" style="font-size: 12px;">
                                <p>{{ doctorListitem?.doctorcity }}</p>
                            </div>
                        </dd>
                    </dl>
                    <div class="classitem">
                        <div class="divitem">
                            <span>{{ doctorListitem?.doctorgood }}</span>
                            <p>好评率</p>
                        </div>
                        <div class="divitem">
                            <span>{{ doctorListitem?.doctoradmin }}</span>
                            <p>锦旗</p>
                        </div>
                        <div class="divitem">
                            <span>{{ doctorListitem?.doctorbrowse }}</span>
                            <p>浏览人数</p>
                        </div>
                        <div class="divitem">
                            <span>{{ doctorListitem?.doctortime }}</span>
                            <p>粉丝数</p>
                        </div>
                    </div>
                    <van-text-ellipsis rows="3" :content="doctorListitem?.doctordescword">
                    </van-text-ellipsis>
                    <div class="popup" @click="show = !show">
                        查看简介>
                    </div>
                    <!-- 弹框 -->
                    <van-action-sheet v-model:show="show" title="医生简介" class="showTan">
                        <div class="content">
                            <dl style="border-top: 1px solid #ececec;">
                                <dt><img src="../../../assets//img/点赞_块.png" alt="" style="width:20px;height: 20px;">
                                </dt>
                                <dd>
                                    <p> 擅长疾病</p>
                                    <span>{{ doctorListitem?.socodescword }}
                                        清晨的阳光洒在大地上，唤醒了沉睡的世界。鸟儿欢快地歌唱，树叶在微风中轻轻摇曳。
                                        夜晚的城市灯火辉煌，车水马龙。人们在忙碌了一天后，享受着属于自己的时光。海边的沙滩上
                                        ，海浪拍打着海岸。孩子们在沙滩上嬉戏玩耍，笑声回荡在空气中。
                                    </span>
                                </dd>
                            </dl>
                            <dl style="margin-bottom: 50px;">
                                <dt><img src="../../../assets/img/个人简历.png" alt="" style="width:20px;height: 20px;">
                                </dt>
                                <dd>
                                    <p> 擅长疾病</p>
                                    <span>
                                        清晨的阳光洒在大地上，唤醒了沉睡的世界。鸟儿欢快地歌唱，树叶在微风中轻轻摇曳。
                                    </span>
                                </dd>
                            </dl>
                        </div>
                    </van-action-sheet>
                </div>
            </div>
            <div class="mainitems">
                <van-tabs v-model:active="active" scrollspy sticky>
                    <van-tab title="服务">
                        <div class="doctorFu">
                            <h3>医生服务</h3>
                            <div class="divlist">
                                <div class="divitem" @click="show_ZiXun = true">
                                    <img src="../../../assets//img/在线咨询.png" alt="">
                                    <p>在线咨询</p>
                                    <span>1对1问医生</span>
                                </div>
                                <div class="divitem" @click="$router.push('/more')">
                                    <img src="../../../assets//img/复诊开方.png" alt="">
                                    <p>复诊开方</p>
                                    <span>1对1问医生</span>
                                </div>
                                <div class="divitem">
                                    <img src="../../../assets//img/优选药房.png" alt="">
                                    <p>优选药房</p>
                                    <span>1对1问医生</span>
                                </div>
                                <div class="divitem">
                                    <img src="../../../assets//img/门诊预约.png" alt="">
                                    <p>门诊预约</p>
                                    <span>1对1问医生</span>
                                </div>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="评价(8)">

                        <div class="divPinJia">
                            <div class="header">
                                <h3>评价(8)</h3>
                                <span @click="router.push('/doctorPing?id=' + listId)">查看更多></span>
                            </div>
                            <div class="divitemJia" v-for="(v, i) in ListDataList" :key="i">
                                <div class="divitem">
                                    <p>{{ v.reviewname }}用户**</p>
                                    <van-rate v-model="v.reviewgood" />
                                </div>
                                <ul style="display: flex;height: 100%;width: 100%">
                                    <li style="font-size: 12px;"
                                        v-for="(item, index) in (v.reviewstate as string).split(',')" :key="index">{{
                                            item }}</li>
                                </ul>
                                <p>感谢{{ doctorListitem?.doctorname }}医生的回复~</p>
                                <span style="color: #cccc;">2023-02-18 00:20:02</span>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="锦旗(3)">
                        <div class="divJinqi">
                            <div class="header">
                                <h3>锦旗(8)</h3>
                                <span @click="router.push('/doctorsJinQi?id=' + listId)">查看更多></span>
                            </div>
                            <divitem :photos="photos" :text="text"></divitem>
                            <divitem :photos="photos" :text="text"></divitem>
                            <divitem :photos="photos" :text="text"></divitem>
                            <p style="height: 30px;display: flex;align-items: center;margin-bottom: 100px;"
                                @click="headerXiao()">
                                <img style="width: 20px;height: 20px;margin-left: 130px;"
                                    src="../../../assets/img/小锦旗.png" alt="">我要送锦旗
                            </p>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <ScrollingBulletScreen />
        <van-action-sheet v-model:show="show_ZiXun" title="选择咨询类型" class="TanZi">
            <dl>
                <dt> <img src="../../../../src/assets/img/在线咨询-资讯.png" alt=""></dt>
                <dd>
                    <div class="jiaGe">
                        <h3>图片咨询</h3>
                        <span>￥15/次</span>
                    </div>
                    <div class="button-Img">
                        <p>和医生发文字,图片聊天</p>
                        <button @click="router.push('/imgZiXun?id=' + listId)">咨询</button>
                    </div>
                    <p>服务时长:20条消息,有效期:24小时</p>
                </dd>
            </dl>
            <dl>
                <dt> <img src="../../../../src/assets/img/电话咨询-咨询.png" alt=""></dt>
                <dd>
                    <div class="jiaGe">
                        <h3>电话咨询</h3>
                        <span>￥15/次</span>
                    </div>
                    <div class="button-Img">
                        <p>和医生发文字,图片聊天</p>
                        <button @click="router.push('/telZiXun?id=' + listId)">咨询</button>
                    </div>
                    <p>服务时长:20条消息,有效期:24小时</p>
                </dd>
            </dl>
        </van-action-sheet>
        <van-action-sheet v-model:show="show_ZiXun1" title="选择咨询类型" class="TanZi">
            <dl>
                <dt> <img src="../../../../src/assets/img/在线咨询-资讯.png" alt=""></dt>
                <dd>
                    <div class="jiaGe">
                        <h3>图片咨询</h3>
                        <span>￥15/次</span>
                    </div>
                    <div class="button-Img">
                        <p>和医生发文字,图片聊天</p>
                        <button @click="router.push('/imgZiXun?id=' + listId)">咨询</button>
                    </div>
                    <p>服务时长:20条消息,有效期:24小时</p>
                </dd>
            </dl>
            <dl>
                <dt> <img src="../../../../src/assets/img/电话咨询-咨询.png" alt=""></dt>
                <dd>
                    <div class="jiaGe">
                        <h3>电话咨询</h3>
                        <span>￥15/次</span>
                    </div>
                    <div class="button-Img">
                        <p>和医生发文字,图片聊天</p>
                        <button @click="router.push('/telZiXun?id=' + listId)">咨询</button>
                    </div>
                    <p>服务时长:20条消息,有效期:24小时</p>
                </dd>
            </dl>
        </van-action-sheet>
        <button class="footer" @click="show_ZiXun1 = true">
            发信息
        </button>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute()
const listId = ref(route.query.id as string | undefined);
import divitem from '../../../components/Home/JinQi.vue'
import ScrollingBulletScreen from '../../../components/Home/DanMu.vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const doctorListitem = ref<ListDatagete>({});
import type { ListDatagete } from '@/Type/indeType.tsx';
import axios from 'axios';
import { showConfirmDialog } from 'vant';
const show = ref(false)
const active = ref(0)
const photos = ref('../../../src/assets/img/锦旗医术精湛.png')
const text = ref('北京 刘小哈赠送了医术精湛')
const XGuanzhu = ref()

const headleGuan = () => {
    if (XGuanzhu.value === true) {
        showConfirmDialog({
            title: '确定取消关注吗',
            message:
                '下次可找不到了',
        }).then(() => {
            XGuanzhu.value = false
        }).catch(() => {
            XGuanzhu.value = true
        })
    }
    LIstData()
    getData()
}

const getData = () => {
    axios.get('/api/doctor/detail', { params: { id: listId.value } }).then(res => {
        localStorage.setItem('doctorname', res.data.data[0].doctorname)
        localStorage.setItem('doctorimage', res.data.data[0].doctorimage)
        doctorListitem.value = res.data.data[0]
        XGuanzhu.value = res.data.data[0].doctorflag === '1' ? true : false
    })
}
getData()


const LIstData = () => {
    axios.post('/api/doctor/flag', { doctorflag: doctorListitem.value?.doctorflag === '1' ? '0' : '1', id: listId.value })
}
const headerXiao = () => {
    router.push('/ItemJinQi?id=' + listId.value)
}
const show_ZiXun = ref(false)
const show_ZiXun1 = ref(false)
// router.push('/list?meno'+'参数')
// router.push('/list',{query:{参数1：值，参数2：值}})
interface ListDataList {
    reviewname: string,
    reviewtitle: string,
    reviewstate: string | string[],
    reviewgood: number
    doctorflag: string
}
const ListDataList = ref<ListDataList[]>([])
const getList = () => {
    axios.get('/api/review/list', { params: { id: listId.value, state: '' } }).then(res => {
        ListDataList.value = res.data.data.slice(0, 3)
    })
}

getList()
</script>